﻿<html>
  <head>
    <meta name="generator" content="h-smile:richtext"/>
  </head>
<body>
  <h1>behavior:clickable</h1>
  <p>Clickable non-focusable element. Lightweight button if you wish that generates BUTTON_CLICK events on MOUSE_DOWN/UP events. </p>
  <h2>Elements</h2>
  <p>These elements have behavior:button applied by default:</p>
  <ul>
    <li><code>&lt;toolbar&gt;&lt;button&gt;&lt;/button&gt;&lt;/toolbar&gt;</code></li></ul>
  <h2>Attributes</h2>
  <p>N/A</p>
  <h2>Events</h2>
  <p>Other than standard set of mouse event the behavior:clickable generates:</p>
  <ul>
    <li>BUTTON_CLICK event, generated on mouse down/up or <code>spacebar</code> key press events when button is in focus. Posted (asynchronous) event.</li>
    <li>BUTTON_PRESS event, generated on mouse down or <code>spacebar</code> key down when button is in focus. Synchronous event.</li></ul>
  <h2>Methods</h2>
  <p>N/A - behavior:button does not introduce any specific methods.</p>
  <h2>Value</h2>
  <p>N/A</p>
  <h2>Button clicks handling in script</h2>
  <h3>raw <code>onClick</code> handler</h3>
  <pre>var btn = $(button#some);
btn.onClick = function() { ... event handling code ... }
</pre>
  <h3><code>on()</code> subscription</h3>
  <pre>var btn = $(button#some);
btn.on(&quot;click&quot;, function() { ... event handling code ... });
self.on(&quot;click&quot;, &quot;button#some&quot;, function() { ... event handling code ... });
</pre>
  <h3>decorators.tis handler</h3>
  <pre>include &quot;decorators.tis&quot;;
@click @on &quot;button#some&quot; :: ... event handling code ...;
</pre>
</body>
</html>